<template>
    <el-dialog v-model="drawer" title="回执凭据" width="700px" :append-to-body="true" @close="close" destroy-on-close>
        <el-carousel :interval="5000" arrow="always" indicator-position="outside">
            <el-carousel-item v-for="(item,index) in form.receiptList" :key="index" style="height: auto !important;">
                <img :src="item.receiptUrl" alt="" style="width:100%;height:100%;display:block">    
            </el-carousel-item>
        </el-carousel>
    </el-dialog>
  </template>
  
  <script>
  import { computed, reactive, toRefs, watch } from 'vue'
  import { ElMessage, ElMessageBox, ElCarouselItem } from 'element-plus'
  import { useOrderApi } from '/@/api/order/index'
  import CreateOrder from './CreateOrder.vue'
  
  import { storeToRefs } from 'pinia';
  import { useUserInfo } from '/@/stores/userInfo'
  export default {
    name: 'DraftList',
    props: {
      dialogDrawer: {
        type: Boolean,
        default: false
      },
      detailData: {
        type: Object,
        default: () => {
            return {}
        } 
      }
    },
    components: {
      CreateOrder,
      ElCarouselItem
    },
    setup(props, context) {
      const { dialogDrawer, detailData } = toRefs(props)
      // 用户信息
      const storeUserInfo = useUserInfo() // 订单各类状态数据
      const { userInfos } = storeToRefs(storeUserInfo)
      const drawer = computed({
        get: () => dialogDrawer.value,
        set: val => {
          context.emit('update:dialogDrawer', val)
        }
      })
      const form = computed({
        get: () => detailData.value,
        set: val => {
          context.emit('update:dialogDrawer', val)
        }
      })
      const orderApi = useOrderApi()
      const state = reactive({

      })
      watch(() => dialogDrawer.value,
        val => {
          if(val) {

          }
        }
      )
      const close = () => {
        context.emit('update:dialogDrawer', false)
      }


      return { 
        ...toRefs(state),
        drawer,
        close,
        form,
      }
    }
  }
  </script>
  
  <style>
    .el-dialog__body {

    }
    .el-carousel__container {
        height: 600px !important;
    }
  </style>